<script lang="ts" setup>
import { ref, computed, onBeforeMount, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import store from "@/store";
// 导入消息工具
import message from "@/utils/message.js";
// 导入图标工具
import { User, ArrowDown, Operation } from "@/utils/icons.js";

const route = useRoute();
const router = useRouter();

const menuActive = ref("/");
menuActive.value = route.path;

const isRotated = ref(false); // 控制图标是否旋转的变量

// 计算属性：判断用户是否登录
const isLogin = computed(() => {
    return store.getters.isLoggedIn;
});

// 计算属性：获取用户信息
const userInfo = computed(() => {
    return store.state.gdepUserInfo;
});

// 计算属性：判断是否为企业用户
const isCompany = computed(() => {
    return store.getters.userType === "company";
});

// 计算属性：获取用户名
const username = computed(() => {
    return store.getters.username;
});

onBeforeMount(() => {});
onMounted(() => {});

const getMenu = () => {
    isRotated.value = !isRotated.value; // 切换旋转状态
};

// 进入用户中心
const goToUserCenter = () => {
    if (isCompany.value) {
        router.push({
            path: "/company/index",
        });
    } else {
        router.push({
            path: "/user/my",
        });
    }
};

// 退出登录
const logout = () => {
    message
        .confirm("确定要退出登录吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            store.commit("setLogout");
            message.success("退出成功");
            router.push({
                path: "/",
            });
        })
        .catch(() => {});
};

onUnmounted(() => {});
</script>

<template>
    <el-affix :offset="0">
        <el-container class="bgColorF">
            <el-header height="50px" class="lh50 pd0 mg0 border_line_ddd">
                <el-row>
                    <el-col :xs="16" :sm="16" :md="5" :lg="5" :xl="5"><div class="fs18 bold">就业直通车</div></el-col>
                    <el-col :xs="0" :sm="0" :md="14" :lg="14" :xl="14">
                        <el-menu
                            ellipsis
                            mode="horizontal"
                            :default-active="menuActive"
                            :router="true"
                            class="h50 lh50"
                        >
                            <el-menu-item index="/">首页</el-menu-item>
                            <el-menu-item index="/position">职位</el-menu-item>
                            <el-menu-item index="/job">企业招聘</el-menu-item>
                            <el-menu-item index="/schoolHire">校园招聘</el-menu-item>
                            <el-menu-item index="/employmentService">就业服务</el-menu-item>
                            <el-menu-item index="/aboutUs">关于我们</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :xs="0" :sm="0" :md="5" :lg="5" :xl="5">
                        <div class="textR">
                            <!-- 未登录状态显示登录链接 -->
                            <template v-if="!isLogin">
                                <router-link
                                    to="/companyLogin"
                                    style="text-decoration: none; color: #000; margin-right: 8px"
                                    class="login-link"
                                    >企业登录</router-link
                                >
                                <el-divider direction="vertical" style="margin: 0 4px" />
                                <router-link
                                    to="/login"
                                    style="text-decoration: none; color: #000; margin-left: 8px"
                                    class="login-link"
                                    >用户登录</router-link
                                >
                            </template>

                            <!-- 已登录状态显示用户信息和下拉菜单 -->
                            <template v-else>
                                <el-dropdown trigger="click">
                                    <span class="user-dropdown-link">
                                        <el-avatar :size="30" icon="User" class="mr-5"></el-avatar>
                                        {{ username }}
                                        <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="goToUserCenter">
                                                <el-icon><User /></el-icon>
                                                <span>{{ isCompany ? "企业中心" : "个人中心" }}</span>
                                            </el-dropdown-item>
                                            <el-dropdown-item divided @click="logout"> 退出登录 </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </template>
                        </div>
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="0" :lg="0" :xl="0">
                        <div class="flex-right lh40 h40 cursor">
                            <el-icon size="26" @click="isLogin ? goToUserCenter : router.push('/login')" class="mgR10">
                                <User />
                            </el-icon>
                            <el-icon size="28" :class="{ 'rotate-90': isRotated }" @click="getMenu">
                                <Operation />
                            </el-icon>
                        </div>
                    </el-col>
                </el-row>
                <el-drawer v-model="isRotated" size="80%">
                    <el-menu :router="true">
                        <el-menu-item index="/">首页</el-menu-item>
                        <el-menu-item index="/position">职位</el-menu-item>
                        <el-menu-item index="/job">企业招聘</el-menu-item>
                        <el-menu-item index="/schoolHire">校园招聘</el-menu-item>
                        <el-menu-item index="/employmentService">就业服务</el-menu-item>
                        <el-menu-item index="/aboutUs">关于我们</el-menu-item>

                        <!-- 移动端抽屉菜单中添加用户相关选项 -->
                        <el-divider />
                        <template v-if="isLogin">
                            <el-menu-item @click="goToUserCenter">
                                {{ isCompany ? "企业中心" : "个人中心" }}
                            </el-menu-item>
                            <el-menu-item @click="logout">退出登录</el-menu-item>
                        </template>
                        <template v-else>
                            <el-menu-item index="/login">用户登录</el-menu-item>
                            <el-menu-item index="/companyLogin">企业登录</el-menu-item>
                        </template>
                    </el-menu>
                </el-drawer>
            </el-header>
        </el-container>
    </el-affix>
</template>

<style scoped>
.el-header {
    --el-header-padding: 0 10px;
}
.el-menu--horizontal > .el-menu-item {
    transition: none !important;
    background: transparent !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
    position: relative;
    background: transparent !important;
    font-weight: normal;
    color: #409eff !important;
    border-bottom: none !important;
}
.el-menu--horizontal > .el-menu-item.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2em;
    height: 2px;
    background-color: #409eff;
}
.el-menu--horizontal > .el-menu-item:hover {
    background: transparent !important;
}
.login-link:hover {
    color: #409eff !important;
    transition: color 0.3s ease;
}
.el-menu {
    border-right: 0px;
}
.rotate-90 {
    transform: rotate(90deg);
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.user-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 50px; /* 与导航栏高度一致 */
    justify-content: center; /* 水平居中 */
}
.mr-5 {
    margin-right: 5px;
}

/* 添加以下样式使登录状态垂直居中 */
.textR {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.login-link {
    display: inline-flex;
    align-items: center;
    height: 50px;
}

.el-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}
</style>
